<template>
  <div class="profile-container">
    <van-nav-bar
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <van-cell-group>
      <input type="file" hidden accept="image/*" ref="file" @change="onFileChange">
      <van-cell
        title="头像"
        is-link
        center
        @click="$refs.file.click()"
      >
        <van-image
          width="30"
          height="30"
          round
          fit="cover"
          :src="user.photo"
        />
      </van-cell>
      <van-cell
        title="昵称"
        is-link
        :value="user.name"
        @click="isEditNameShow = true"
      />
      <van-cell
        title="性别"
        is-link
        :value="user.gender == 0 ? '男' : '女'"
        @click="isEditGenderShow = true"
      />
      <van-cell
        title="生日"
        is-link
        :value="user.birthday"
        @click="isEditBirthdayShow = true"
      />
    </van-cell-group>
    <van-popup v-model="isEditPhotoShow" position="bottom" class="update-photo-popup" style="height: 100%">
      <update-photo
        v-if="isEditPhotoShow"
        :file="previewImage"
        @close="isEditPhotoShow = false"
        @update-photo="user.photo = $event"
      />
    </van-popup>
    <van-popup v-model="isEditNameShow" position="bottom" style="height: 100%">
      <update-name
        v-if="isEditNameShow"
        v-model="user.name"
        @close="isEditNameShow = false"
      />
    </van-popup>
    <van-popup v-model="isEditGenderShow" position="bottom">
      <update-gender
        v-model="user.gender"
        @close="isEditGenderShow = false"
      />
    </van-popup>
    <van-popup v-model="isEditBirthdayShow" position="bottom">
      <update-birthday
        v-model="user.birthday"
        @close="isEditBirthdayShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '../../api/profile'
import updateName from './update-name'
import updateGender from './update-gender'
import updateBirthday from './update-birthday'
import updatePhoto from './update-photo'

export default {
  name: 'profileIndex',
  components: {
    updateName,
    updateGender,
    updateBirthday,
    updatePhoto
  },
  data () {
    return {
      user: {},
      isEditNameShow: false,
      isEditGenderShow: false,
      isEditBirthdayShow: false,
      isEditPhotoShow: false,
      previewImage: null
    }
  },
  created () {
    this.loadUserProfile()
  },
  methods: {
    async loadUserProfile () {
      const { data: { data: res } } = await getUserProfile()
      this.user = res
    },
    onFileChange () {
      // 在弹窗里预览图片
      const file = this.$refs.file.files[0]
      console.log(this.$refs.file.files)
      this.previewImage = file
      // 展示弹出层
      this.isEditPhotoShow = true
      // 为了解决相同文件不触发 change 时间
      this.$refs.file.value = ''
    }
  }
}
</script>

<style scoped>
.van-popup {
  background-color: #ededed;
}
.update-photo-popup {
  background-color: #000;
}
</style>
